<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="smsList">
      <el-table-column label="编号" align="center" prop="templateCode" width="150"/>
      <el-table-column label="名称" align="center" prop="templateName"/>
      <el-table-column label="对外类型" align="center" prop="outerTypeFormat" width="100"/>
      <el-table-column label="类型" align="center" prop="typeFormat" width="100"/>
      <el-table-column label="内容" align="center" prop="templateContent" width="500"/>
      <el-table-column label="工单号" align="center" prop="orderId"/>
      <el-table-column label="审核状态" align="center" prop="statusFormat"/>
      <el-table-column label="创建时间" align="center" prop="createDate"/>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-mobile-phone" @click="simulation(scope.row)">模拟</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 模拟 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" center append-to-body>
      <el-row :gutter="150">
        <el-col :span="10">
          <el-form ref="form" :model="keys" label-width="80px">
            <el-form-item v-for="(f,index) in keys" :label="index">
              <el-input v-model="keys[index]" style="width: 180px;" clearable></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="14">
          <div style="position: relative">
            <img :src="phoneSms" style="width: 300px;height: 600px" alt="">
            <p style="width: 200px;position:absolute;top:34%;left:36%;transform: translate(-50%, -50%);font-weight: bold;">【浦东新区妇幼保健中心】{{ content }}</p>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {listSms} from "@/api/pv/sms";
import {strFormat, strExtract, copyObj} from "@/utils/zzDouUtils/ObjUtil";
import phoneSms from "@/assets/images/phone_sms.png";

export default {
  name: "Sms",
  data() {
    return {
      smsList: undefined,
      // 遮罩层
      loading: true,
      open: false,
      title: null,
      simulationData: null,
      keys: {},
      content: null,
      phoneSms: phoneSms,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**  */
    getList() {
      listSms().then(response => {
        this.smsList = response.rows;
        this.loading = false;
      })
    },
    /** 模拟 */
    simulation(row) {
      this.simulationData = copyObj(row);
      this.title = row.templateCode;
      this.keys = strExtract(row.templateContent);
      this.content = row.templateContent;

      this.open = true;
    }
  },
  watch: {
    keys: {
      handler(n, o) {
        this.content = strFormat(this.simulationData.templateContent, n);
      },
      deep: true,//深度监听
    }
  },

};
</script>
<style>
</style>
